<template>
  <el-form ref="genInfoForm" :model="info" :rules="rules" label-width="150px">
    <el-row>
<!--      选线未完成-->
<!--      <el-col :span="12">-->
<!--        <el-form-item prop="tplCategory">-->
<!--          <template #label>生成模板</template>-->
<!--          <el-select v-model="info.tplCategory" @change="tplSelectChange">-->
<!--            <el-option label="单表（增删改查）" value="crud" />-->
<!--            <el-option label="树表（增删改查）" value="tree" />-->
<!--            <el-option label="主子表（增删改查）" value="sub" />-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--      </el-col>-->

<!--      <el-col :span="12">-->
<!--        <el-form-item prop="tplWebType">-->
<!--          <template #label>前端类型</template>-->
<!--          <el-select v-model="info.tplWebType">-->
<!--            <el-option label="Vue2 Element UI 模版" value="element-ui" />-->
<!--            <el-option label="Vue3 Element Plus 模版" value="element-plus" />-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--      </el-col>-->

      <el-col :span="12">
        <el-form-item prop="packageName">
          <template #label>
            生成包路径
            <el-tooltip content="生成在哪个java包下，例如 com.ruoyi.system" placement="top">
              <el-icon><question-filled /></el-icon>
            </el-tooltip>
          </template>
          <el-input v-model="info.packageName" />
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="moduleName">
          <template #label>
            生成模块名
            <el-tooltip content="可理解为子系统名，例如 system" placement="top">
              <el-icon><question-filled /></el-icon>
            </el-tooltip>
          </template>
          <el-input v-model="info.moduleName" />
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="businessName">
          <template #label>
            生成业务名
            <el-tooltip content="可理解为功能英文名，例如 user" placement="top">
              <el-icon><question-filled /></el-icon>
            </el-tooltip>
          </template>
          <el-input v-model="info.businessName" />
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="functionName">
          <template #label>
            生成功能名
            <el-tooltip content="用作类描述，例如 用户" placement="top">
              <el-icon><question-filled /></el-icon>
            </el-tooltip>
          </template>
          <el-input v-model="info.functionName" />
        </el-form-item>
      </el-col>


      <el-col :span="12">
        <el-form-item>
          <template #label>
            上级菜单
            <el-tooltip content="分配到指定菜单下，例如 系统管理" placement="top">
              <el-icon><question-filled /></el-icon>
            </el-tooltip>
          </template>
          <tree-select
            v-model:value="info.parentMenuId"
            :options="menuOptions"
            :objMap="{ value: 'menuId', label: 'menuName', children: 'children' }"
            placeholder="请选择系统菜单"
          />
        </el-form-item>
      </el-col>
    </el-row>
    
<!--    <template v-if="info.tplCategory == 'tree'">-->
<!--      <h4 class="form-header">其他信息</h4>-->
<!--      <el-row v-show="info.tplCategory == 'tree'">-->
<!--        <el-col :span="12">-->
<!--          <el-form-item>-->
<!--            <template #label>-->
<!--              树编码字段-->
<!--              <el-tooltip content="树显示的编码字段名， 如：dept_id" placement="top">-->
<!--                <el-icon><question-filled /></el-icon>-->
<!--              </el-tooltip>-->
<!--            </template>-->
<!--            <el-select v-model="info.treeCode" placeholder="请选择">-->
<!--              <el-option-->
<!--                v-for="(column, index) in info.columns"-->
<!--                :key="index"-->
<!--                :label="column.columnName + '：' + column.columnComment"-->
<!--                :value="column.columnName"-->
<!--              ></el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="12">-->
<!--          <el-form-item>-->
<!--            <template #label>-->
<!--              树父编码字段-->
<!--              <el-tooltip content="树显示的父编码字段名， 如：parent_Id" placement="top">-->
<!--                <el-icon><question-filled /></el-icon>-->
<!--              </el-tooltip>-->
<!--            </template>-->
<!--            <el-select v-model="info.treeParentCode" placeholder="请选择">-->
<!--              <el-option-->
<!--                v-for="(column, index) in info.columns"-->
<!--                :key="index"-->
<!--                :label="column.columnName + '：' + column.columnComment"-->
<!--                :value="column.columnName"-->
<!--              ></el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="12">-->
<!--          <el-form-item>-->
<!--            <template #label>-->
<!--              树名称字段-->
<!--              <el-tooltip content="树节点的显示名称字段名， 如：dept_name" placement="top">-->
<!--                <el-icon><question-filled /></el-icon>-->
<!--              </el-tooltip>-->
<!--            </template>-->
<!--            <el-select v-model="info.treeName" placeholder="请选择">-->
<!--              <el-option-->
<!--                v-for="(column, index) in info.columns"-->
<!--                :key="index"-->
<!--                :label="column.columnName + '：' + column.columnComment"-->
<!--                :value="column.columnName"-->
<!--              ></el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--    </template>-->

<!--    <template v-if="info.tplCategory == 'sub'">-->
<!--      <h4 class="form-header">关联信息</h4>-->
<!--      <el-row>-->
<!--        <el-col :span="12">-->
<!--          <el-form-item>-->
<!--            <template #label>-->
<!--              关联子表的表名-->
<!--              <el-tooltip content="关联子表的表名， 如：sys_user" placement="top">-->
<!--                <el-icon><question-filled /></el-icon>-->
<!--              </el-tooltip>-->
<!--            </template>-->
<!--            <el-select v-model="info.subTableName" placeholder="请选择" @change="subSelectChange">-->
<!--              <el-option-->
<!--                v-for="(table, index) in tables"-->
<!--                :key="index"-->
<!--                :label="table.tableName + '：' + table.tableComment"-->
<!--                :value="table.tableName"-->
<!--              ></el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="12">-->
<!--          <el-form-item>-->
<!--            <template #label>-->
<!--              子表关联的外键名-->
<!--              <el-tooltip content="子表关联的外键名， 如：user_id" placement="top">-->
<!--                <el-icon><question-filled /></el-icon>-->
<!--              </el-tooltip>-->
<!--            </template>-->
<!--            <el-select v-model="info.subTableFkName" placeholder="请选择">-->
<!--              <el-option-->
<!--                v-for="(column, index) in subColumns"-->
<!--                :key="index"-->
<!--                :label="column.columnName + '：' + column.columnComment"-->
<!--                :value="column.columnName"-->
<!--              ></el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--    </template>-->

  </el-form>
</template>

<script setup>
import { listMenu } from "@/api/system/menu";

const subColumns = ref([]);
const menuOptions = ref([]);
const { proxy } = getCurrentInstance();

const props = defineProps({
  info: {
    type: Object,
    default: null
  },
  tables: {
    type: Array,
    default: null
  }
});

// 表单校验
const rules = ref({
  tplCategory: [{ required: true, message: "请选择生成模板", trigger: "blur" }],
  packageName: [{ required: true, message: "请输入生成包路径", trigger: "blur" }],
  moduleName: [{ required: true, message: "请输入生成模块名", trigger: "blur" }],
  businessName: [{ required: true, message: "请输入生成业务名", trigger: "blur" }],
  functionName: [{ required: true, message: "请输入生成功能名", trigger: "blur" }]
});
function subSelectChange(value) {
  props.info.subTableFkName = "";
}
function tplSelectChange(value) {
  if (value !== "sub") {
    props.info.subTableName = "";
    props.info.subTableFkName = "";
  }
}
function setSubTableColumns(value) {
  for (var item in props.tables) {
    const name = props.tables[item].tableName;
    if (value === name) {
      subColumns.value = props.tables[item].columns;
      break;
    }
  }
}
/** 查询菜单下拉树结构 */
function getMenuTreeselect() {
  listMenu().then(response => {
    menuOptions.value = proxy.handleTree(response.data, "menuId");
  });
}

watch(() => props.info.subTableName, val => {
  setSubTableColumns(val);
});

// watch(() => props.info.tplWebType, val => {
//   if (val === '') {
//     props.info.tplWebType = "element-plus";
//   }
// });

getMenuTreeselect();
</script>
